import './index.scss';
import React, { Component } from 'react'
import classNames from 'classnames'
import { _ } from 'libs/tools';

const Page = (config={}) => WrappedComponent => class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hideBackButton: false,
      showCrmButton: false
    };
  }

  setHeader = (config) => {
    this.setState(config);
  }

  onContactCrm = _.throttle(() => {
    location.href = 'jzapp://message_company';
  }, 1500)

  render() {
    let { hideBackButton, showCrmButton } = this.state;
    return (
        <div className={classNames('page', config.classNames)}>
            <div className="page-hd">
              {!(hideBackButton || config.hideBackButton) && <div className="page-hd-back" onClick={this.state.onBack || (() => {})}></div>}
              {showCrmButton || config.showCrmButton && <div className="page-hd-crm" onClick={this.onContactCrm}></div>}
              <h1 className="page-hd-title">{this.state.title || config.title}</h1>
            </div>

            <div className="page-bd">
              <WrappedComponent setHeader={this.setHeader} {...this.props}/>
            </div>
        </div>
    );
  }
};

export default Page;